<template>
  <cube-scroll ref="scroll" class="ratings" :options="scollOption">
    <div class="ratings-content">
      <div class="overview">
        <div class="overviwe-left">
          <h1 class="score">{{ seller.score }}</h1>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{ seller.rankRate }}%</div>
        </div>
        <div class="overviwe-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <star :size="36" :score="seller.serviceScore"></star>
            <span class="score">{{ seller.serviceScore }}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <star :size="36" :score="seller.foodScore"></star>
            <span class="score">{{ seller.foodScore }}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">送达时间</span>
            <span class="delivery">{{ seller.deliveryTime }}分钟</span>
          </div>
        </div>
      </div>

      <split></split>
      <div class="rating-select-wrapper">
        <ratings-select
          @select="onSelect"
          @toggle="onToggle"
          :selectType="selectType"
          :onlyContent="onlyContent"
          :ratings="ratings"
        ></ratings-select>
      </div>

      <div class="rating-wrapper">
        <ul>
          <li
            class="rating-item border-1px"
            v-for="(rating, index) of computedRatings"
            :key="index"
          >
            <div class="avatar">
              <img :src="rating.avatar" width="28" height="28" />
            </div>
            <div class="content">
              <h1 class="name">{{ rating.username }}</h1>
              <div class="star-wrapper">
                <star :size="24" :score="rating.score"></star>
                <span class="delivery" v-show="rating.deliveryTime"
                  >{{ rating.deliveryTime }}分钟送达</span
                >
              </div>
              <p class="text">{{ rating.text }}</p>
              <div
                class="recommend-wrapper"
                v-show="rating.recommend || rating.recommend.length"
              >
                <span :class="selectIcon(rating.rateType)"></span>
                <span
                  class="item"
                  v-for="(item, index) in rating.recommend"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
              <div class="time">{{ format(rating.rateTime) }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </cube-scroll>
</template>

<script>
import moment from 'moment'
import star from 'common/star/star'
import split from 'common/split/split'
import ratingsSelect from 'common/ratings-select/ratings-select'
import ratingMixin from 'assets/mixins/rating.js'
import { getRatings } from 'api/index.js'
import { formatDate } from 'assets/js/date.js'
console.log(formatDate);

export default {
  name: 'ratings',
  mixins: [ratingMixin],
  props: {
    data: Object,
  },
  data() {
    return {
      ratings: [],
      scollOption: {
        click: false,
        directionLockThreshold: 0,
      },
    }
  },
  computed: {
    seller() {
      return this.data.seller || {}
    },
  },
  methods: {
    fetch() {
      if (!this.fetched) {
        this.fetched = true
        getRatings({ id: this.seller.id }).then((data) => {
          this.ratings = data.ratings
        })
      }
    },
    selectIcon(rateType) {
      if (rateType === 0) {
        return 'icon-thumb_up'
      } else {
        return 'icon-thumb_down'
      }
    },
    format(time) {
      // return moment(time).format('YYYY-MM-DD hh:mm')
      return formatDate(time, 'YYYY-MM-DD hh:mm')
    },
  },
  watch: {
    computedRatings() {
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      })
    },
  },
  components: {
    star,
    split,
    ratingsSelect,
  },
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixin.stylus';
@import '~styles/base.stylus';

.ratings {
  .ratings-content {
    .overview {
      margin: 18px 0;
      display: flex;

      .overviwe-left {
        flex: 1 0 110px;
        border-right: 1px solid rgba(7, 17, 27, 0.1);
        text-align: center;

        // width: fit-content;
        .score {
          margin-bottom: 6px;
          font-size: 24px;
          color: rgb(255, 153, 0);
          line-height: 28px;
        }

        .title {
          font-size: 12px;
          line-height: 12px;
          color: rgb(7, 17, 27);
          margin-bottom: 8px;
        }

        .rank {
          font-size: 10px;
          line-height: 10px;
          color: rgb(147, 153, 159);
        }
      }

      .overviwe-right {
        flex: 3 0 187.69px;
        text-align: center;

        .score-wrapper {
          margin-bottom: 8px;

          &:last-child {
            text-align: left;
            // score-wrapper的长度 == 187.5px,设置margin 让最后一个元素居中
            margin: 0 0 0 calc(((100% - 187.69px) / 2));
          }

          .title {
            margin-right: 12px;
            font-size: 12px;
            color: rgb(7, 17, 27);
            line-height: 18px;
          }

          .score {
            margin-left: 12px;
            font-size: 12px;
            color: rgb(255, 153, 0);
            line-height: 18px;
          }

          .delivery {
            font-size: 12px;
            color: rgb(147, 153, 159);
            line-height: 18px;
          }
        }
      }
    }
  }

  .rating-select-wrapper {
    padding: 0 18px;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
  }

  .rating-wrapper {
    margin: 0 18px;

    .rating-item {
      position: relative;
      display: flex;
      padding: 18px 0;
      border-1px(rgba(7, 17, 27, 0.1));
      white-space: pre-wrap;

      &:last-child {
        border-none();
      }

      .avatar {
        flex: 0 0 28px;
        margin-right: 12px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        overflow: hidden;
      }

      .content {
        flex: 1;
        overflow: hidden;

        .name {
          margin-bottom: 4px;
          font-size: 10px;
          line-height: 12px;
          color: rgb(7, 17, 27);
        }

        .star-wrapper {
          margin-bottom: 6px;

          .delivery {
            display: inline-block;
            margin-left: 6px;
            font-size: 10px;
            line-height: 12px;
            font-weight: 200;
            color: rgb(147, 153, 159);
          }
        }

        .text {
          margin-bottom: 8px;
          font-size: 12px;
          line-height: 18px;
          color: rgb(7, 17, 27);
        }

        .recommend-wrapper {
          .icon-thumb_up, .icon-thumb_down {
            display: inline-block;
            margin: 0 8px 4px 0;
            padding-top: 1px;
            vertical-align: middle;
            font-size: 12px;
            line-height: 16px;
            color: rgb(0, 160, 220);
          }

          .icon-thumb_down {
            color: rgb(183, 187, 191);
          }

          .item {
            display: inline-block;
            margin: 0 8px 4px 0;
            padding: 0 6px;
            vertical-align: top;
            font-size: 9px;
            line-height: 16px;
            color: rgb(147, 153, 159);
            border: 1px solid rgba(7, 17, 27, 0.1);
            border-radius: 2px;

            &:last-child {
              margin-right: 0;
            }
          }
        }

        .time {
          position: absolute;
          top: 18px;
          right: 0;
          font-size: 10px;
          line-height: 12px;
          font-weight: 200;
          color: rgb(147, 153, 159);
        }
      }
    }
  }
}
</style>
